<template>
    <div class="box_bg">
        <h2 class="box_tit">
            <i class="icon icon1"></i>课程表
            <i class="reti"></i>
        </h2>
        <div class="source">
            <!-- 查询 -->
            <div class="components_searchs clearfix" @keyup.enter="searchGetSyllabus">
                <div class="el-form demo-form-inline el-form--inline">
                    <div class="el-form-item">
                        <label class="el-form-item__label">学校：</label>
                        <div class="el-form-item__content">
                            <el-select v-model="searchForm.schoolId" clearable filterable placeholder="请选择学校" @change="changeSchool">
                              <el-option
                                v-for="item in options.schoolList"
                                :key="item.id"
                                :label="item.text"
                                :value="item.id">
                              </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="el-form-item">
                        <label class="el-form-item__label">学院：</label>
                        <div class="el-form-item__content">
                            <el-select v-model="searchForm.secondSchoolId" clearable filterable placeholder="请选择学院" @change="changeSecondSchool">
                              <el-option
                                v-for="item in options.secondSchoolList"
                                :key="item.id"
                                :label="item.text"
                                :value="item.id">
                              </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="el-form-item">
                        <label class="el-form-item__label">专业：</label>
                        <div class="el-form-item__content">
                            <el-select v-model="searchForm.professionId" clearable filterable placeholder="请选择专业" @change="changeProfession">
                              <el-option
                                v-for="item in options.professionList"
                                :key="item.id"
                                :label="item.text"
                                :value="item.id">
                              </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="el-form-item" style="padding-top: 4px;">
                        <el-button size="mini" type="primary" icon="el-icon-search" @click="searchGetSyllabus">查询</el-button>
                    </div>
                    <div class="el-form-item" style="padding-top: 4px;">
                        <el-button size="mini" type="primary" icon="el-icon-refresh" @click="resertSearch">重置</el-button>
                    </div>
                    <div class="el-form-item" style="padding-top: 4px;">
                        <el-button size="mini" type="primary" icon="el-icon-view"
                            @click="advancedSearchState=!advancedSearchState">高级搜索</el-button>
                    </div>
                </div>
                <div  v-if="advancedSearchState" class="components_searchs el-form demo-form-inline el-form--inline">
                    <div class="el-form-item">
                        <label class="el-form-item__label">学期：</label>
                        <div class="el-form-item__content">
                            <el-select v-model="searchForm.semester" clearable filterable placeholder="请选择学期">
                              <el-option
                                v-for="item in options.gradeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="el-form-item">
                        <label class="el-form-item__label">课程：</label>
                        <div class="el-form-item__content">
                            <el-input placeholder="请输入课程" v-model="searchForm.courseName" clearable></el-input>
                        </div>
                    </div>
                    <div class="el-form-item">
                        <label class="el-form-item__label">讲师：</label>
                        <div class="el-form-item__content">
                            <el-input placeholder="请输入讲师" v-model="searchForm.teacherName" clearable></el-input>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 按钮 -->
            <!-- <div class="components_btns  clearfix">
            </div> -->
            <!-- 表格 -->
            <el-table :data="syllabusTable" border style="width: 100%">
                <el-table-column :show-overflow-tooltip="true" prop="schoolName" align="center" label="学校"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="secondSchoolName" align="center" label="学院"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="professionName" align="center" label="专业"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="semester" align="center" width="80" label="学期"></el-table-column>

                <el-table-column :show-overflow-tooltip="true" prop="shortName" align="left" width="200" label="班级"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="courseName" header-align="center" label="课程名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="teacherName" align="center" width="70" label="讲师"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="total" align="center" width="70" label="授课数"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="teachWeek" align="left"width="300" label="教学周"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="week" align="left" width="70" label="星期"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="section" align="left" width="70" label="节次"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="teachPlace" align="left" label="授课地点"></el-table-column>

            </el-table>
            <!-- 分页 -->
            <div class="paginationBox">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="[15, 30, 50, 100]"
                    :page-size="page.visiblePages"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.totalSize">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import {enums} from '@/constant'
    import {config} from '@/config'
        export default {

        data() {
            return {
                state: false,
                advancedSearchState: false,
                dialogVisible: false,
                // 课程表表格
                syllabusTable: [],
                page:{
                    currentPage:1,
                    visiblePages:15,
                    totalSize:100
                },
                searchForm:{
                    schoolId:null,        //学校列表
                    secondSchoolId:null,  //院系列表
                    professionId:null,    //专业列表
                    semester:'',             //学期
                    courseName:'',
                    teacherName:''
                },
                options:{
                    schoolList:[],        //学校列表
                    secondSchoolList:[],  //院系列表
                    professionList:[],    //专业列表
                    gradeList:[]              //学期
                }
            };
        },
        created() { },
        mounted() {
            this.getSyllabus();
            this.getSchoolList();
            this.getSemesterList();
        },
        watch: {},
        methods: {
            //获取课程表数据
            getSyllabus(){
                var self = this;
                self.axios({
                    method: "get",
                    url: api.syllabusManager.teacherSyllabus,
                    params: {
                        "pageNum": self.page.currentPage,
                        "pageSize": self.page.visiblePages
                    }
                }).then((response)=>{
                        if(response.data.success){
                            self.syllabusTable = response.data.data.list;
                            self.page.totalSize = response.data.data.total;
                        }else{
                            self.$message.error(response.data.msg);
                        }
                    })
            },
            handleSizeChange(val){
                if(isNaN(val)){
                    val = 30;
                }
                this.page.pageSize = val;
                this.searchGetSyllabus();
            },
            handleCurrentChange(val){
                if(val < 1){
                    val = 1;
                }
                this.page.currentPage = val;
                this.searchGetSyllabus();
            },
            //获取学校
            getSchoolList(){
                let vm = this;
                vm.axios.get(api.getSchoolList).then((response) => {
                    if (response.data.success) {
                        this.options.schoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //学校监听
            changeSchool(schoolId){
                this.searchForm.secondSchoolId = null;
                this.searchForm.professionId=null;
                this.searchForm.classesIds=null;
                this.options.secondSchoolList = [];
                this.options.professionList = [];
                this.getSecondSchoolList(schoolId);
            },
            // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList,{
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        vm.options.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //二级学校监听
            changeSecondSchool(secondSchoolId){
                let schoolId = this.searchForm.schoolId;
                this.searchForm.professionId=null;
                this.searchForm.classesIds=null;
                this.options.professionList = [];
                this.getProfessionlList(schoolId,secondSchoolId);
            },
            //获取筛选后的专业
            getProfessionlList(schoolId,secondSchoolId){
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.options.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            changeProfession(professionId){
                let schoolId = this.searchForm.schoolId;
                let secondSchoolId = this.searchForm.secondSchool;
                this.searchForm.classesIds=null;
                // this.getClassList(schoolId,secondSchoolId,professionId);
            },
            //获取学期的列表
            getSemesterList(){
                let self = this;
                self.axios({
                    method: "get",
                    url: api.dictsTypesSubListUrl,
                    params:{
                    "type":'semester_type'
                    }
                })
                .then(function(response) {
                    if(response.data.success){
                        // _.forEach(response.data.data,function(item){
                        //     item.value = item.value+"";
                        // })
                        self.options.semesterList = response.data.data;
                    }else{
                        self.$message({
                            duration: 1000,
                            message: response.data.msg,
                            center: true,
                            type: "error"
                        });
                    }
                })
            },
            //重置
            resertSearch(){
              let self = this;
              self.searchForm = {};
              // self.getTeacherWorkProgressManagerPaginationData();
              self.searchGetSyllabus();
            },
            // 搜索
            searchGetSyllabus(){
                let self = this;

                self.searchForm.pageNum = self.page.currentPage;
                self.searchForm.pageSize = self.page.visiblePages;

                self.axios.get(api.syllabusManager.teacherSyllabus, {
                     params: self.searchForm

                }).then((response) => {
                    if (response.data.success) {
                        self.syllabusTable = JSON.parse(JSON.stringify(response.data.data.list));
                        self.page.totalSize = response.data.data.total;
                    } else {
                        self.$message.error(response.data.msg);
                    }
                })
            }
        }
    };
</script>
